<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        {{usernameStr}}
        <el-header  style="font-size: 35px">
            湖工二手电子商品网站
                <el-button type="primary" @click="dialogVisible = true" plain>登录</el-button>
                <el-button type="primary" @click="registerVisible = true" plain>注册</el-button>
            (联系电话:18727563655)
        </el-header>

        <!--    对话框表单实现登录功能-->
        <el-dialog
                title="用户登录"
                :visible.sync="dialogVisible"
                width="30%">
            <!--        登录表单-->
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"  @click="login">登录</el-button>
        </span>
        </el-dialog>
        <!--    对话框表单实现注册功能-->
        <el-dialog
                title="用户注册"
                :visible.sync="registerVisible"
                width="30%">
            <!--        登录表单-->
            <el-form ref="form" :model="registerform" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="registerform.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="registerform.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="registerform.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="registerform.sex"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="registerform.text"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="registerVisible = false">取 消</el-button>
            <el-button type="primary"  @click="register">注册</el-button>
        </span>
        </el-dialog>

        <el-main>
            <!--    导航栏-->
            <el-tabs type="border-card">
                <el-tab-pane label="商品">
                    <!--商品管理-->
                    <div>
                        <!--    查询表单-->
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="商品类型:">
                                <el-select v-model="formInline.tid" placeholder="商品类型">
                                    <el-option  v-for="type in types"  :label="type.tname" :value="type.tid"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品名称:">
                                <el-input v-model="formInline.pname" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-form>

                        <!--    表格-->
                        <template>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        label="外观"
                                        align="center">
                                    <!--                解决在表格中插入图片的功能-->
                                    <template slot-scope="scope">
                                        <el-popover placement="top-start" title="" trigger="hover">
                                            <!--                        放大后的大图-->
                                            <img :src="scope.row.pimage" alt="" style="width: 300px;height: 300px">
                                            <!--                        原始的小图-->
                                            <img slot="reference" :src="scope.row.pimage" style="width: 50px;height: 50px">
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="pname"
                                        label="名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pcontent"
                                        label="详情"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="价格"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pnumber"
                                        label="数量"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pdate"
                                        align="center"
                                        label="上架时间">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="操作">
                                    <!--                    可以使用 scope.row.xxx  获取具体字段的值-->
                                    <template slot-scope="scope">
                                        <el-button type="primary" @click="addCar(scope.row)">加入购物车</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>

                        <!--    分页工具条-->
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[4, 6, 8, 10]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalCount">
                        </el-pagination>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="购物车">

                    <div>
                        <!--    购物车管理表格-->
                        <template>
                            <el-table
                                    :data="cars"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        prop="chrid"
                                        label="购物车编号"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pname"
                                        label="商品名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="商品单价"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="购买数量"
                                        align="center">
                                    <template slot-scope="scope">
                                        {{scope.row.onumber}}
                                        <el-button type="primary" @click="addOnumber(scope.row)" icon="el-icon-circle-plus-outline" circle></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="money"
                                        label="总计金额"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="odate"
                                        label="购买日期"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="结算"
                                        align="center">
                                    <template slot-scope="scope">
                                    <el-button type="success" @click="addOrder(scope.row)" icon="el-icon-shopping-cart-full" circle></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>

                </el-tab-pane>

                <el-tab-pane label="订单管理">
                    <div>
                        <!--    订单管理表格-->
                        <template>
                            <el-table
                                    :data="orders"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        label="订单状态"
                                        align="center">
                                    <el-button type="success" icon="el-icon-check" circle></el-button>
                                </el-table-column>
                                <el-table-column
                                        prop="oid"
                                        label="点单编号"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pname"
                                        label="商品名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="onumber"
                                        label="购买数量"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="money"
                                        label="总计金额"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="odate"
                                        label="购买日期"
                                        align="center">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <el-footer>
            (@湖北工程学院)-(@软件工程)-@(021321752308)-(@李澳)-(@2022-06-14)
        </el-footer>
    </el-container>
</div>
<script src="../js/vue.js"></script>
<script src="../js/element-ui/lib/index.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/axios.min.js"></script>
<link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                //分页工具条
                currentPage: 1,
                pageSize:4,
                // 表格数据
                tableData: [],
                // 表单数据
                formInline: {},
                //商品类型信息
                types : [],
                //添加对话框显示
                dialogVisible: false,
                registerVisible:false,
                //登录表单提交数据
                form: {
                    username:'',
                    password:''
                },
                //注册表单提交数据
                registerform:{
                    username:'',
                    password:'',
                    phone:'',
                    sex:'',
                    text:''
                },
                //商品总数
                totalCount:100,
                //用户名
                username:'',
                usernameStr:'',
                //订单数据
                orders:[],
                cid:'',
                //购物车数据
                cars:[],
                //加入购物车
                carInfo:{
                    cid:'',
                    pname:'',
                    price:''
                },
                carOrder:{
                    cid:'',
                    pname:'',
                    onumber:'',
                    money:'',
                    odate:''
                },
                //购物车编号
                chrid:''
            }
        },
        // 当页面加载完成后
        mounted() {
            this.selectAll();
        },
        methods: {
            selectAll(){
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:80/infos/page/"+_this.currentPage+"/"+_this.pageSize,
                    data:_this.formInline
                }).then(function (resp) {
                    _this.tableData = resp.data.data.rows;
                    _this.totalCount = resp.data.data.totalCount;
                }),
                    axios({
                        method:"get",
                        url:"http://localhost:80/types"
                    }).then(function (resp) {
                        _this.types = resp.data.data;
                    })
            },
            //添加商品数量
            addOnumber(val){
                val.onumber += 1;
                val.money = val.onumber * val.price;
                val.money = Number(val.money.toString().match(/^\d+(?:\.\d{0,2})?/));
            },
            //结算成功后删除该购物车记录
            deleteByChrid(){
                var _this = this;
                axios({
                    method:"delete",
                    url:"http://localhost:80/cars/"+_this.chrid
                }).then(function (resp) {
                    if(resp.data.code == 20031){
                    }
                }),
                    axios({
                        method:"get",
                        url:"http://localhost:80/cars/"+_this.carOrder.cid
                    }).then(function (resp) {
                        _this.cars = resp.data.data;
                    }),
                    axios({
                        method:"get",
                        url:"http://localhost:80/orders/"+_this.carOrder.cid
                    }).then(function (resp) {
                        _this.orders = resp.data.data;
                    })
            },
            //结算购物车
            addOrder(val){
                var _this = this;
                _this.carOrder.cid = val.cid;
                _this.carOrder.pname = val.pname;
                _this.carOrder.onumber = val.onumber;
                _this.carOrder.money = val.money;
                _this.carOrder.odate = val.odate;
                _this.chrid = val.chrid;
                //发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:80/orders",
                    data:_this.carOrder
                }).then(function (resp) {
                    if(resp.data.code == 20011){
                        _this.deleteByChrid();
                        // 弹出消息提示
                        _this.$message({
                            message:'结算成功!',
                            type:'success'
                        });
                        _this.selectAll();
                    }
                    else {
                        _this.$message({
                            message:'结算失败!',
                            type:'error'
                        });
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //表单查询
            onSubmit() {
                this.selectAll();
            },
            // 分页工具条
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();
            },
            //添加商品到购物车
            addCar(val){
                var _this = this;
                _this.carInfo.cid = _this.cid;
                _this.carInfo.pname = val.pname;
                _this.carInfo.price = val.price;
                if(_this.username != null && _this.username != ''){
                    _this.selectCarsByCid();
                    //发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:80/cars",
                        data:_this.carInfo
                    }).then(function (resp) {
                        if(resp.data.code == 20011){
                            // 弹出消息提示
                            _this.$message({
                                message:'加入购物车成功!',
                                type:'success'
                            }),
                            axios({
                                method:"get",
                                url:"http://localhost:80/cars/"+_this.carInfo.cid
                            }).then(function (resp) {
                                _this.cars = resp.data.data;
                            })
                        }
                        else {
                            _this.$message({
                                message:'添加失败!',
                                type:'error'
                            });
                        }
                    })
                    // 弹出消息提示
                    _this.$message({
                        message:'添加成功!',
                        type:'success'
                    });
                }else {
                    _this.$message({
                        message:'添加失败,请先登录账号!',
                        type:'error'
                    });
                }
            },
            //查询订单信息
            selectOrdersByCid(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:80/orders/"+_this.cid
                }).then(function (resp) {
                    _this.orders = resp.data.data;
                })
            },
            //查询购物车信息
            selectCarsByCid(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:80/cars/"+_this.cid
                }).then(function (resp) {
                    _this.cars = resp.data.data;
                })
            },
            //实现登录功能
            login(){
                var _this = this;
                axios.get("http://localhost/clients/"+_this.form.username+"/"+_this.form.password).then((res)=>{
                    _this.dialogVisible = false;
                    _this.username = res.data.data.username;
                    _this.cid = res.data.data.cid;
                    if(_this.username != null && _this.username != ''){
                        _this.usernameStr = _this.username + ',欢迎你登录本网站!';
                    }
                    if (res.data.code == 20041){
                        _this.selectOrdersByCid();
                        _this.selectCarsByCid();
                        // 弹出消息提示
                        _this.$message({
                            message:'登录成功!',
                            type:'success'
                        });
                    }else {
                        _this.$message({
                            message:'登录失败!',
                            type:'error'
                        });
                    }
                });
            },
            //实现注册用户功能
            register(){
                var _this = this;
                //发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:80/clients",
                    data:_this.registerform
                }).then(function (resp) {
                    _this.registerVisible = false;
                    if(resp.data.code == 20011){
                        // 弹出消息提示
                        _this.$message({
                            message:'注册成功!',
                            type:'success'
                        });
                        _this.selectAll();
                    }
                    else {
                        _this.$message({
                            message:'注册失败!',
                            type:'error'
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>